import React, { Component } from 'react';
import formatTime from './formatTime';
import './css/index.less';

export default class Audio extends Component {
    state = {
        src: this.props.src, // 资源
        name: this.props.name,
        isPlay: !!this.props.autoplay,
        hide: this.props.hide, // 是否隐藏播放器
        isMuted: this.props.isMuted,
        currentTime: 0, // 单位s
        duration: 0, // 单位s
    };

    componentDidMount() {
        // 页面渲染后
        const audio = this.audio;
        if (this.props.loop) {
            audio.setAttribute('loop', 'loop');
        }
        if (this.props.autoplay) {
            if (window.wx) {
                const wx = window.wx;

                wx.config && wx.config(WPT.signConfig);
                wx.ready
                    && wx.ready(() => {
                        wx.checkJsApi({
                            jsApiList: ['getNetworkType'],
                            success() {
                                audio.play();
                            },
                        });
                    });
            }
            audio.setAttribute('autoplay', 'autoplay');
        }
        if (this.props.time) {
            audio.addEventListener('timeupdate', () => {
                this.setState({ currentTime: audio.currentTime });
            });
            audio.addEventListener('loadedmetadata', () => {
                this.setState({ duration: audio.duration });
            });
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            src: nextProps.src,
            name: nextProps.name,
            isPlay: !!nextProps.autoplay,
            hide: nextProps.hide, // 是否隐藏播放
            isMuted: nextProps.isMuted,
        });
        const audio = this.audio;
        setTimeout(() => {
            if (nextProps.loop) {
                audio.setAttribute('loop', 'loop');
            } else {
                audio.removeAttribute('loop');
            }
            if (nextProps.autoplay) {
                audio.setAttribute('autoplay', 'autoplay');
                audio.currentSrc && audio.play();
            } else {
                audio.removeAttribute('autoplay');
                audio.pause();
            }
        }, 100);
    }

    doPlay = () => {
        const audio = this.audio;
        if (audio.paused) {
            audio.play();
            this.state.isPlay = true;
        } else {
            audio.pause();
            this.state.isPlay = false;
        }
        this.props.doPlay && this.props.doPlay(this.state.isPlay);
        this.forceUpdate();
    };

    paused = () => {
        // 只用页面隐藏的时候用
        const audio = this.audio;
        audio.pause();
        this.state.isPlay = false;
        this.forceUpdate();
    };

    play = isPlay => {
        const audio = this.audio;
        if (isPlay) {
            audio.play();
            this.state.isPlay = true;
        } else {
            audio.pause();
            this.state.isPlay = false;
        }
        this.props.doPlay && this.props.doPlay(this.state.isPlay);
        this.forceUpdate();
    };

    audioRef = ref => {
        this.audio = ref;
    };

    render() {
        const muted = this.state.isMuted ? { muted: true } : {};
        return (
            <div className={`module_audio${this.state.hide ? ' hide' : ''}`}>
                <div className="hide">
                    <audio ref={this.audioRef} src={this.state.src} {...muted} />
                </div>
                <div className="my_audio" {...WPT.onTouchEnd(this.doPlay)}>
                    <div className={`${this.state.isPlay ? 'pause' : 'play'} btn_play`} />
                    <div className="name">{this.state.name}</div>
                    {this.props.time && (
                        <div className="time">
                            {formatTime(this.state.currentTime)}／{formatTime(this.state.duration)}
                        </div>
                    )}
                </div>
            </div>
        );
    }
}
